import React from "react";
import JTable from "@/common/Table";
import {
    deleteHomeIndexColumns,
    getHomeIndexColumns,
    saveHomeIndexColumns,
    updateHomeIndexColumns
} from "@/api/sysHomeColumn";
import {homeIndexColumns} from "@/js/columns";
import {HomeControlContainer} from "@/component/Mine/AdminConsole/HomeControl/style";
import {Form, Input, Modal} from "antd";
import Confirm from "@/common/Modal/Confirm";
import {successMsg} from "@/util/global";

class HomeControl extends React.Component {
    form = React.createRef();

    constructor(props) {
        super(props);
        this.handleLoad = this.handleLoad.bind(this);
        this.handleChangeVal = this.handleChangeVal.bind(this);
        this.handleClickEdit = this.handleClickEdit.bind(this);
        this.handleClickDelete = this.handleClickDelete.bind(this);
        this.handleDelete = this.handleDelete.bind(this);
        this.handleSave = this.handleSave.bind(this);
        this.handleEdit = this.handleEdit.bind(this);
        this.handleClickSave = this.handleClickSave.bind(this);
        this.init = this.init.bind(this);
        this.state = {
            data: [],
            page: 1,
            size: 10,

            /**
             * 表单处理新增及编辑操作
             */
            formTitle: '',
            ModalVisible: false,
            confirmVisible: false,
            formData: {},
            selectId: '',
        }
    }

    /**
     * columns中点击编辑按钮
     * @param formData
     */
    handleClickEdit(formData) {
        this.setState({
            ModalVisible: true,
            formData,
            formTitle: '编辑'
        })
        this.form.current.setFieldsValue(formData)
    }

    /**
     * 点击新增按钮
     * @param formData
     */
    handleClickSave() {
        this.setState({
            ModalVisible: true,
            formData: {},
            formTitle: '新增'
        })
        this.form.current.resetFields()
    }

    /**
     * columns中点击删除按钮
     * @param id
     */
    handleClickDelete(id) {
        this.setState({
            selectId: id,
            confirmVisible: true,
        })
    }

    handleChangeVal(key, e) {
        let forD = this.state.formData;
        forD[key] = e.target.value;
        this.setState({
            formData: forD
        });
    }

    handleDelete(params) {
        deleteHomeIndexColumns(params).then(res => {
            if (res.success) {
                successMsg("操作成功");
                this.init();
            }
        })
    }

    handleSave() {
        this.form.current.validateFields().then(r => {
            saveHomeIndexColumns(this.state.formData).then(res => {
                if (res.success) {
                    successMsg("操作成功");
                    this.init();
                }
            })
        })
    }

    handleEdit(params) {
        updateHomeIndexColumns(params).then(res => {
            if (res.success) {
                successMsg("操作成功");
                this.init();
            }
        })
    }

    init() {
        this.form.current.resetFields();
        this.setState({
            formTitle: '',
            ModalVisible: false,
            confirmVisible: false,
            formData: {}
        })
        this.handleLoad();
    }

    handleLoad(params) {
        getHomeIndexColumns(params)
            .then(({success, data}) => {
                if (success) {
                    this.setState({
                        data
                    })
                }
            })
    }

    render() {
        return <HomeControlContainer>
            {/* 单选删除弹窗 */}
            <Confirm visible={this.state.confirmVisible}
                     dataSize={1}
                     onOk={() => this.handleDelete({ids: [this.state.selectId]})}
                     onCancel={() => this.setState({confirmVisible: false})}
            />
            <JTable ref={"childTable"}
                    data={this.state.data}
                    columns={homeIndexColumns(this)}
                    onReload={this.handleLoad}
                    onDelete={this.handleDelete}
                    defaultSize={this.state.size}
                    clickSaveCallback={this.handleClickSave}
            />
            <Modal
                forceRender={true}
                title={this.state.formTitle}
                visible={this.state.ModalVisible}
                onOk={this.handleSave}
                onCancel={this.init}
            >
                <Form
                    ref={this.form}
                    labelCol={{span: 4}}
                    wrapperCol={{span: 14}}
                    layout="horizontal"
                >
                    <Form.Item label={"名称"}
                               name={'title'}
                               rules={[{required: true, message: '名称不能为空！'}]}
                    >
                        <Input onChange={(e) => this.handleChangeVal('title', e)}
                               value={this.state.formData.title}
                               maxLength={50}
                               allowClear/>
                    </Form.Item>
                    <Form.Item label={"图标"}
                               name={'logoType'}>
                        <Input onChange={(e) => this.handleChangeVal('logoType', e)}
                               value={this.state.formData.logoType}
                               maxLength={100}
                               allowClear/>
                    </Form.Item>
                    <Form.Item label={"页面跳转"}
                               name={'linkPath'}>
                        <Input onChange={(e) => this.handleChangeVal('linkPath', e)}
                               value={this.state.formData.linkPath}
                               maxLength={100}
                               allowClear/>
                    </Form.Item>
                    <Form.Item label={"描述"}
                               name={'desc'}>
                        <Input.TextArea onChange={(e) => this.handleChangeVal('desc', e)}
                                        value={this.state.formData.desc}
                                        maxLength={255}
                                        allowClear/>
                    </Form.Item>
                </Form>
            </Modal>
        </HomeControlContainer>
    }
}

export default HomeControl;
